<template>
  <div class="second-hand-container">
    <div class="second-hand-header">
      <h2>羽毛球用品二手交易</h2>
      <button @click="showItemForm = true" class="publish-btn">发布二手</button>
    </div>

    <!-- 发布二手物品表单 -->
    <div class="item-modal" v-if="showItemForm">
      <div class="modal-content">
        <span class="close-btn" @click="showItemForm = false">&times;</span>
        <h3>发布二手物品</h3>
        <form @submit.prevent="handleItemSubmit">
          <div class="form-group">
            <label for="itemTitle">物品名称</label>
            <input
              type="text"
              id="itemTitle"
              v-model="newItem.title"
              required
              placeholder="请输入物品名称"
            />
          </div>
          <div class="form-group">
            <label for="itemCategory">物品类别</label>
            <select
              id="itemCategory"
              v-model="newItem.category"
              required
            >
              <option value="">请选择类别</option>
              <option value="racket">羽毛球拍</option>
              <option value="shoes">羽毛球鞋</option>
              <option value="clothes">运动服装</option>
              <option value="bag">运动包</option>
              <option value="accessories">其他配件</option>
            </select>
          </div>
          <div class="form-group">
            <label for="itemPrice">价格 (元)</label>
            <input
              type="number"
              id="itemPrice"
              v-model="newItem.price"
              required
              min="0"
              step="0.01"
              placeholder="请输入价格"
            />
          </div>
          <div class="form-group">
            <label for="itemCondition">物品成色</label>
            <select
              id="itemCondition"
              v-model="newItem.condition"
              required
            >
              <option value="">请选择成色</option>
              <option value="new">全新未使用</option>
              <option value="likeNew">几乎全新</option>
              <option value="excellent">成色极佳</option>
              <option value="good">良好</option>
              <option value="fair">一般</option>
            </select>
          </div>
          <div class="form-group">
            <label for="itemDescription">物品描述</label>
            <textarea
              id="itemDescription"
              v-model="newItem.description"
              required
              placeholder="请输入物品描述"
              rows="4"
            ></textarea>
          </div>
          <div class="form-group">
            <label for="itemContact">联系方式</label>
            <input
              type="text"
              id="itemContact"
              v-model="newItem.contact"
              required
              placeholder="请输入联系方式"
            />
          </div>
          <div class="form-actions">
            <button type="button" @click="showItemForm = false" class="cancel-btn">取消</button>
            <button type="submit" class="submit-btn">发布</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 二手物品列表 -->
    <div class="items-list">
      <div class="item-card" v-for="item in items" :key="item.id">
        <div class="item-header">
          <h3 class="item-title">{{ item.title }}</h3>
          <span class="item-price">¥{{ item.price.toFixed(2) }}</span>
        </div>
        <div class="item-category">类别: {{ getCategoryName(item.category) }}</div>
        <div class="item-condition">成色: {{ getConditionName(item.condition) }}</div>
        <div class="item-description">{{ item.description }}</div>
        <div class="item-footer">
          <span class="item-contact">联系方式: {{ item.contact }}</span>
          <span class="item-date">{{ formatDate(item.createdAt) }}</span>
        </div>
      </div>
      <div class="no-items" v-if="items.length === 0">
        暂无二手物品，快来发布第一件物品吧！
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

const store = useStore();
const router = useRouter();
const showItemForm = ref(false);
const newItem = ref({
  title: '',
  category: '',
  price: '',
  condition: '',
  description: '',
  contact: ''
});

// 获取二手物品列表
const staticItems = ref([{id: 1, title: '尤尼克斯羽毛球拍', category: 'racket', price: 350.00, condition: 'excellent', description: '尤尼克斯Arc11羽毛球拍，使用3个月，9成新，无磕碰，线已穿好', contact: '13800138001', createdAt: '2023-10-01T10:00:00'}, {id: 2, title: '胜利羽毛球鞋', category: 'shoes', price: 280.00, condition: 'good', description: '胜利A960羽毛球鞋，43码，仅试穿，几乎全新', contact: '13900139002', createdAt: '2023-10-02T14:30:00'}, {id: 3, title: '李宁羽毛球包', category: 'bag', price: 120.00, condition: 'good', description: '李宁6支装羽毛球包，有轻微磨损，功能完好', contact: '13700137003', createdAt: '2023-10-03T09:15:00'}, {id: 4, title: '羽毛球拍套装', category: 'racket', price: 450.00, condition: 'likeNew', description: '全新未使用羽毛球拍套装，含拍包和3个羽毛球', contact: '13600136004', createdAt: '2023-10-04T16:45:00'}, {id: 5, title: '二手羽毛球鞋', category: 'shoes', price: 180.00, condition: 'good', description: '亚瑟士羽毛球鞋，42码，鞋底轻微磨损', contact: '13500135005', createdAt: '2023-10-05T11:20:00'}, {id: 6, title: '羽毛球拍包', category: 'bag', price: 80.00, condition: 'fair', description: '单肩羽毛球拍包，有轻微污渍，功能正常', contact: '13400134006', createdAt: '2023-10-06T15:30:00'}, {id: 7, title: '维克多羽毛球拍', category: 'racket', price: 420.00, condition: 'excellent', description: '维克多HX-900羽毛球拍，使用半年，保养良好', contact: '13300133007', createdAt: '2023-10-07T10:00:00'}, {id: 8, title: '羽毛球运动服套装', category: 'clothes', price: 150.00, condition: 'likeNew', description: '羽毛球运动速干套装，XL码，仅穿过一次', contact: '13200132008', createdAt: '2023-10-08T14:25:00'}, {id: 9, title: '羽毛球训练器', category: 'accessories', price: 99.00, condition: 'good', description: '羽毛球自动发球训练器，帮助练习反应速度', contact: '13100131009', createdAt: '2023-10-09T09:15:00'}, {id: 10, title: '羽毛球网', category: 'accessories', price: 85.00, condition: 'new', description: '标准羽毛球网，全新未拆封', contact: '13000130010', createdAt: '2023-10-10T16:40:00'}, {id: 11, title: '羽毛球拍握把胶', category: 'accessories', price: 25.00, condition: 'new', description: '10个装羽毛球拍手胶，防滑吸汗', contact: '12900129011', createdAt: '2023-10-11T11:30:00'}, {id: 12, title: '二手羽毛球背包', category: 'bag', price: 120.00, condition: 'good', description: '大容量羽毛球背包，可装4支球拍和衣物', contact: '12800128012', createdAt: '2023-10-12T14:50:00'}, {id: 13, title: '羽毛球捡球器', category: 'accessories', price: 45.00, condition: 'excellent', description: '便捷式羽毛球捡球器，减少弯腰捡球疲劳', contact: '12700127013', createdAt: '2023-10-13T09:45:00'}, {id: 14, title: '羽毛球训练靶', category: 'accessories', price: 65.00, condition: 'good', description: '羽毛球精准训练靶，帮助提高击球准确性', contact: '12600126014', createdAt: '2023-10-14T15:20:00'}, {id: 15, title: '专业羽毛球袜', category: 'accessories', price: 35.00, condition: 'new', description: '5双装专业羽毛球袜，吸汗透气', contact: '12500125015', createdAt: '2023-10-15T10:30:00'}, {id: 16, title: '羽毛球拍减震器', category: 'accessories', price: 15.00, condition: 'new', description: '羽毛球拍专用减震器，减少击球震动', contact: '12400124016', createdAt: '2023-10-16T14:15:00'}, {id: 17, title: '羽毛球场地地胶', category: 'accessories', price: 450.00, condition: 'likeNew', description: '专业羽毛球场地地胶，20平米，使用1个月', contact: '12300123017', createdAt: '2023-10-17T09:50:00'}, {id: 18, title: '羽毛球裁判用具套装', category: 'accessories', price: 88.00, condition: 'new', description: '包含裁判哨、红黄牌和记分牌', contact: '12200122018', createdAt: '2023-10-18T15:30:00'}, {id: 19, title: '羽毛球训练手册', category: 'accessories', price: 25.00, condition: 'good', description: '羽毛球技巧训练图解手册，适合初学者', contact: '12100121019', createdAt: '2023-10-19T11:20:00'}, {id: 20, title: '羽毛球拍修复服务', category: 'service', price: 50.00, condition: 'new', description: '专业羽毛球拍断线修复服务，含重新拉线', contact: '12000120020', createdAt: '2023-10-20T16:45:00'}]);
const items = computed(() => [...store.getters.allSecondHandItems, ...staticItems.value]);
const currentUser = computed(() => store.getters.currentUser);

onMounted(() => {
  // 检查是否已登录
  if (!store.getters.isLoggedIn) {
    // 不强制登录，但发布功能需要登录
  }
});

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};

// 获取类别名称
const getCategoryName = (categoryValue) => {
  const categories = {
    'racket': '羽毛球拍',
    'shoes': '羽毛球鞋',
    'clothes': '运动服装',
    'bag': '运动包',
    'accessories': '其他配件'
  };
  return categories[categoryValue] || '未分类';
};

// 获取成色名称
const getConditionName = (conditionValue) => {
  const conditions = {
    'new': '全新未使用',
    'likeNew': '几乎全新',
    'excellent': '成色极佳',
    'good': '良好',
    'fair': '一般'
  };
  return conditions[conditionValue] || '未说明';
};

// 处理物品发布
const handleItemSubmit = () => {
  if (!store.getters.isLoggedIn) {
    alert('请先登录后再发布物品');
    router.push('/login');
    return;
  }

  // 验证表单
  if (!newItem.value.title.trim() || !newItem.value.category || !newItem.value.price) {
    alert('物品名称、类别和价格不能为空');
    return;
  }

  if (!newItem.value.condition || !newItem.value.contact) {
    alert('请选择物品成色并填写联系方式');
    return;
  }

  // 提交新物品
  store.dispatch('publishSecondHandItem', {
    ...newItem.value,
    price: parseFloat(newItem.value.price),
    seller: currentUser.value.username
  });

  // 重置表单并关闭模态框
  newItem.value = {
    title: '',
    category: '',
    price: '',
    condition: '',
    description: '',
    contact: ''
  };
  showItemForm.value = false;
};
</script>

<style scoped>
.second-hand-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.second-hand-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

h2 {
  color: #2196F3;
  margin: 0;
}

.publish-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: transform 0.2s;
}

.publish-btn:hover {
  transform: translateY(-2px);
}

/* 模态框样式 */
.item-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

h3 {
  color: #2196F3;
  margin-top: 0;
}

.form-group {
  margin-bottom: 1.2rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #4CAF50;
  font-weight: 500;
}

input, select, textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
}

textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.cancel-btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 6px;
  cursor: pointer;
}

.submit-btn {
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* 物品列表样式 */
.items-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.item-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.item-title {
  color: #2196F3;
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
}

.item-price {
  background-color: #4CAF50;
  color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-weight: bold;
}

.item-category,
.item-condition {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.item-description {
  color: #333;
  line-height: 1.6;
  margin: 1rem 0;
  padding: 0.8rem;
  background-color: #f9f9f9;
  border-radius: 6px;
}

.item-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #eee;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.item-contact {
  color: #2196F3;
  font-weight: 500;
}

.item-date {
  color: #999;
}

.no-items {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: #777;
  background-color: #f9f9f9;
  border-radius: 12px;
}
</style>